<template>
    <el-row style="margin:0 auto;width:80%;">
        <el-col :span="4">
            <h3 @click="toIndex()">FOODOIR</h3>
        </el-col>
        <el-col :span="20">
            <el-menu :default-active="this.$store.state.navChoose" router class="el-menu-demo" mode="horizontal">
                <el-menu-item index="/index">首页</el-menu-item>
                <el-menu-item index="/share">美食分享</el-menu-item>
                <el-menu-item index="/record">优秀美食记载</el-menu-item>
                <el-menu-item index="/about">关于</el-menu-item>

                <el-menu-item v-if="!isLogin()" index="/login" style="float:right">登录</el-menu-item>
                <el-submenu v-if="isLogin()" index="/login" style="float:right;" popper-class="set-select">
                    <template slot="title"><el-avatar size="large" :src="this.$store.state.userInfo.infoImg"></el-avatar><span style="font-weight:700;margin-left:10px;font-size:14px;">{{this.$store.state.userInfo.infoNickname}}</span></template>
                    <el-menu-item index="/person" style="width:10px"><i class="el-icon-star-off" style="color:blue"></i> 个人中心</el-menu-item>
                    <el-menu-item index="/index" @click="exitAccount"><i class="el-icon-circle-close" style="color:red"></i> 退出</el-menu-item>
                </el-submenu>

                <el-menu-item v-if="!isLogin()" style="float:right">
                    <Logon></Logon>
                </el-menu-item>

            </el-menu>
        </el-col>
    </el-row>
</template>

<script>
    import Logon from "../register/Logon"

    export default {
        name: 'NavMenu',
        components: {
            Logon
        },
        data() {
            return {
            }
        },
        created() {
            //console.log(this.$route.path)
            this.$store.commit('selectNav', this.$route.path);
        },
        methods: {
            toIndex() {
                this.$router.replace('/index')
                this.$store.commit('selectNav', this.$route.path);
                this.$forceUpdate()
            },
            isLogin() {
                console.log(this.$store.state.user != '');
                return this.$store.state.user.username != '';
            },
            exitAccount(){
                window.localStorage.removeItem('user');
                //window.location.reload();
                this.$store.state.user.username='';
                this.$message({
                  message: '退出成功，期待下一次相见~',
                  type: 'success'
                });
            }
        }
    }
</script>

<style scoped>
 .el-submenu{
     min-width: 100px;
 }

</style>

<style>
.set-select ul{
    min-width:150px;
}
</style>